jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例毕业设计考试,jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例毕业设计考试,编程代码,站长入门,小晨网络技术服务工作室

jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例毕业设计考试

时间 : 2023-06-29 编辑 :创始人

以下是使用jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例，以及对应的JSON文件内容：

<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .gallery-item {
      width: 20%;
      margin: 10px;
      text-align: center;
    }
    .gallery-item img {
      width: 100%;
    }
    .gallery-item .title {
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div class="gallery"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $.getJSON('images.json', function(data) {
        var gallery = $('.gallery');
        $.each(data, function(index, image) {
          var galleryItem = $('<div>').addClass('gallery-item');
          var img = $('<img>').attr('src', image.url);
          var title = $('<div>').addClass('title').text(image.title);
          galleryItem.append(img, title);
          gallery.append(galleryItem);
        });
      });
    });
  </script>
</body>
</html>

JSON文件内容（images.json）：

[
  {
    "url": "image1.jpg",
    "title": "Image 1"
  },
  {
    "url": "image2.jpg",
    "title": "Image 2"
  },
  {
    "url": "image3.jpg",
    "title": "Image 3"
  },
  {
    "url": "image4.jpg",
    "title": "Image 4"
  },
  {
    "url": "image5.jpg",
    "title": "Image 5"
  },
  {
    "url": "image6.jpg",
    "title": "Image 6"
  },
  {
    "url": "image7.jpg",
    "title": "Image 7"
  },
  {
    "url": "image8.jpg",
    "title": "Image 8"
  },
  {
    "url": "image9.jpg",
    "title": "Image 9"
  },
  {
    "url": "image10.jpg",
    "title": "Image 10"
  }
]

在上述代码中，我们首先创建了一个具有 .gallery 类的 <div> 元素，用于显示图片列表。然后使用 $.getJSON() 方法从 images.json 文件中获取图片数据和标题。在回调函数中，我们使用 $.each() 方法遍历每个图片对象，并创建一个包含图片和标题的 <div> 元素。然后将每个图片元素添加到 .gallery 容器中。

通过 CSS 样式，我们使用 display: flex 和 flex-wrap: wrap 来实现一行5列的布局，使图片在一行中自动换行，并使用 justify-content: center 来居中对齐图片。每个图片元素使用 .gallery-item 类来设置宽度和间距，并使用 .title 类来设置标题的样式。

请确保将 images.json 文件的路径正确指向你的 JSON 文件，并确保 JSON 文件中的数据格式正确。同时，根据你的需求，可以修改 JSON 文件中的图片 URL 和标题。

jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例 毕业设计考试

jQuery从JSON文件中加载图片列表内容和图片标题，并以一行5列的方式显示的代码示例毕业设计考试